<template>
	<view class="detail_wrap">
		<view class="title">{{title}}</view>
		<view  v-for="(item, i) in cardList"  class="item" :class="{fileWrap: item.type === 'file'}" :key="i">
			<view class="label">{{item.label}}</view>
			<view class="value error" v-if="item.type === 'error'">{{item.value}}</view>
			<view class="value text" v-else-if="item.type === 'text'">{{item.value}}</view>
			<view class="value file" v-else-if="item.type === 'file'" v-for="(file, i) in item.value" :key="i">
				<!-- file.url -->
				<image class="img" src="../../static/logo.png"></image>
				<view class="text">{{ file.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			title: String,
			cardList: Array,
		},
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.detail_wrap{
	width: 705rpx;
	background: #FFFFFF;
	border-radius: 27rpx;
	padding: 40rpx;
	box-sizing: border-box;
	font-family: PingFang SC;
	margin-bottom: 20rpx;

	.title{
		font-weight: 500;
		font-size: 36rpx;
		color: #000000;
		line-height: 19rpx;
		margin-bottom: 40rpx;
	}
	.item{
		display: flex;
		font-weight: 400;
		font-size: 27rpx;
		color: #616E87;
		align-items: center;
		margin-bottom: 40rpx;
		.label{
			margin-right: 10rpx;
			min-width: 140rpx;
		}
		.value{
			font-weight: 400;
			font-size: 31rpx;
			color: #000000;
		}
		.value.error{
			height: 53rpx;
			line-height: 53rpx;
			background: #FFEFF2;
			border-radius: 7rpx;
			color: #FF5570;
			padding: 0 27rpx;
		}
		.value.file{
			width: 625rpx;
			height: 107rpx;
			background: #FBFBFB;
			border-radius: 13rpx;
			border: 1px solid #F3F3F3;
			display: flex;
			padding: 21rpx 27rpx;
			box-sizing: border-box;
			line-height: 107rpx;
			.img{
				width: 51rpx;
				height: 64rpx;
				margin-right: 20rpx;
			}
			.text{
				font-weight: 400;
				font-size: 31rpx;
				color: #000000;
				line-height: 64rpx;
			}
		}
	}
	.item.fileWrap{
		display: block;
		.value.file{
			margin-top: 27rpx;
		}
		
	}
}
</style>
